<script setup>
import uniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import uniDatetimePicker
  from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import uniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import {ref} from 'vue'
const valueA = ref('');
// 选项数据
// 单选值（使用单个值而非数组）
const singleValueA= ref('');

// 选项数据（保持不变）
const rangeA = ref([
  { "value": 0, "text": "清水河校区:学生活动中心圆厅侧"},
  { "value": 1, "text": "沙河校区:沙河停车场（体育馆旁）" }
]);
// 选择变更事件
const changeA= (eA) => {
  console.log('单选值:', eA);
  console.log("rangeA", rangeA.value);
  console.log("当前选中值", singleValueA.value);
};
const valueB = ref('');
// 选项数据
// 单选值（使用单个值而非数组）
const singleValueB= ref('');

// 选项数据（保持不变）
const rangeB= ref([
  { "value": 0, "text": "天府机场"},
  { "value": 1, "text": "双流机场" },
  { "value": 2, "text": "成都东站"},
  { "value": 3, "text": "成都西站" }
]);
// 选择变更事件
const changeB = (eB) => {
  console.log('单选值:', eB);
  console.log("rangeB", rangeB.value);
  console.log("当前选中值", singleValueB.value);
};
const valueC = ref('');
// 选项数据
// 单选值（使用单个值而非数组）
const singleValueC= ref('');

// 选项数据（保持不变）
const rangeC= ref([
  { "value": 0, "text": "7:00"},
  { "value": 1, "text": "10:00" },
  { "value": 2, "text": "13:00"},
  { "value": 3, "text": "16:00" }
]);
// 选择变更事件
const changeC = (eC) => {
  console.log('单选值:', eC);
  console.log("rangeC", rangeC.value);
  console.log("当前选中值", singleValueC.value);
};
const tonextm=()=>{
  //跳转到子页面
  uni.navigateTo({url:'/studens/return/fxsm'})
}
const toNextd=()=>{
  //跳转到子页面
  let flag=confirm("是否确认提交")
  if(flag){
    uni.navigateTo({url:'/studens/return/chneggong'})
  }
}
</script>

<template>
  <view id="checiyuyue">
    <view class="hong">
      <image class="tp18" src="/static/image/jingshi.png"></image>
      <view class="qa">亲爱的同学！</view>
      <view class="qa">当天预约次日及未来几天的车次，每天17点到次日凌晨停止预约。</view>
      <view class="qa">运行时段：2022年12月8日(周四)至12月12日（周一）。</view>
    </view>
    <uni-section  class="cc" title="乘车日期"  type="line" padding>
      <view class="example-body">
        <uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
      </view>
    </uni-section>
    <uni-section  class="cc" title="乘车点"  type="line" padding>
      <view class="uni-px-5 uni-pb-5">
        <!-- 单选模式的选择器 -->
        <uni-data-select v-model="singleValueA" :localdata="rangeA" @change="changeA" label="请选择乘车点"
            mode="selectorA">{{ singleValueA }}</uni-data-select>
        </view>
    </uni-section>
    <uni-section  class="cc" title="送站目的地"  type="line" padding>
      <view class="uni-px-5 uni-pb-5">
        <!-- 单选模式的选择器 -->
        <uni-data-select v-model="singleValueB" :localdata="rangeB" @change="changeB" label="请选择送站站点"
                         mode="selectorB">{{ singleValueB}}</uni-data-select>
      </view>
    </uni-section>
    <uni-section  class="cc" title="班次"  type="line" padding>
      <view class="uni-px-5 uni-pb-5">
        <!-- 单选模式的选择器 -->
        <uni-data-select v-model="singleValueC" :localdata="rangeC" @change="changeC" label="请选择班次"
                         mode="selectorB">{{ singleValueC}}</uni-data-select>
      </view>
    </uni-section>
    <view class="sm" @click="tonextm">
      《返乡送站说明》
    </view>
    <button class="but" type="primary" @click="toNextd">提交</button>
  </view>
</template>

<style scoped>
#checiyuyue{
  width: 100%;
  height: 100%;
  background-color: #F0F3FA;
}
.sm{
  width: 322px;
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #2873FF;
  letter-spacing: 0;
  position: relative;
  left: 50px;
  top: 20px;
  text-align: center;
}
.hong{
  width: 100%;
  height: 105px;
  background-color: #FFECE2;
}
.tp18{
  width: 20px;
  height: 20px;
  left: 15px;
  top: 15px;
}
.qa{
  color: #5b5b5b;
  font-size: 13px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0;
  text-align: left;
  position: relative;
  left: 50px;
  top: -10px;
}
.cc{
  background-color: #F0F3FA;
}
.but{
  position: relative;
  top: 50px;
}
</style>